<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>新的模板</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <form @submit.prevent="submit">
                <div>
                    <label for="username">账号：</label>
                    <input type="text" id="username" v-model.trim="username"/>
                </div>
                </br>
                <div>
                    <label for="password">密码：</label>
                    <input type="password" id="password" v-model="password"/>
                </div>
                </br>
                <div>
                    <label for="age">年龄：</label>
                    <input type="number" id="age" v-model.number="age"/>
                </div>
                </br>
                <div>
                    <label>性别：</label>
                    <label>男</label>
                    <input type="radio" name="sex" v-model="sex" value="0"/>
                    <label>女</label>
                    <input type="radio" name="sex" v-model="sex" value="1"/>
                </div>
                </br>
                <div>
                    <label>爱好：</label>
                    <label>学习</label>
                    <input type="checkbox" name="hobby" v-model="hobby" value="0"/>
                    <label>打游戏</label>
                    <input type="checkbox" name="hobby" v-model="hobby" value="1"/>
                    <label>吃饭</label>
                    <input type="checkbox" name="hobby" v-model="hobby" value="2"/>
                </div>
                </br>
                <div>
                    <label>所属校区：</label>
                    <select id="schoolAddress" v-model="city">
                        <option value="beijin">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="shenzheng">深圳</option>
                        <option value="guangzhou">广州</option>
                    </select>
                </div>
                </br>
                <div>
                    <label>其他信息：</label>
                    <textarea text="text" v-model.lazy="other">

                    </textarea>
                </div>
                </br>
                <div>
                    <input type="checkbox" name="yonghuxieyi" v-model="agree"/>
                    阅读并接受<a href="www.baidu.com">《用户协议》</a>
                </div>
                </br>
                <button>提交</button>
            </form>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。

            const vm = new Vue({
                el: '#root',
                data:{
                    username: '',
                    password: '',
                    age:0,
                    sex: '',
                    hobby: [],
                    city:'beijin',
                    other:'',
                    agree:''
                },
                methods:{
                    submit(){
                        console.log(this._data)
                    }
                }
            })

        </script>
    </body>
</html>
